<template>
  <div
    style="
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
    "
  >
    <div
      style="
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: end;
        align-items: center;
      "
    >
      <button
        @click="gotoAddUserPage"
        style="
          background: #3f8cff;
          color: white;
          border: 0;
          padding: 5px 10px;
          border-radius: 10px;
        "
      >
        + 添加用户
      </button>
    </div>
    <div style="width: 100%; flex: 1">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column prop="username" label="账户名" width="180">
        </el-table-column>
        <el-table-column prop="userStatus" label="用户状态"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div style="display: flex; align-items: center">
              <el-link
                style="margin-right: 10px"
                @click="editUser(scope.row)"
                type="primary"
                >编辑</el-link
              >
              <el-link
                style="margin-right: 10px"
                @click="deleteUser(scope.row)"
                type="danger"
                >删除</el-link
              >
              <el-link @click="changePermission(scope.row)" type="success"
                >权限管理</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import eventBus from "../util/myEventBus";
import request from "../axios/request";
export default {
  data() {
    return {
      tableData: [],
      pageSearchVO: {
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    gotoAddUserPage() {
      this.$router.push("/AddUserPage");
    },
    editUser(item) {
      this.$router.push("/EditUserPage/" + item.id);
    },
    async deleteUser(item) {
      this.$store.state.lastMethod = "deleteUser";
      this.$store.state.lastData = item;
      let res = await request({
        url: "/user/api/deleteUser/" + item.username,
        method: "DELETE",
      });
      console.log(item);
    },
    changePermission(item) {
      this.$router.push("/PermissionManagementPage/" + item.id);
    },
    async getUserPage() {
      this.$store.state.lastMethod = "getUserPage";
      this.$store.state.lastData = null;
      let res = await request({
        url: "/user/api/getUserPage",
        method: "POST",
        data: this.pageSearchVO,
      });
      if (res.data.status == 200) {
        this.tableData = res.data.data.data;
      }
    },
  },
  mounted() {
    this.getUserPage();
    eventBus.$on("getUserPage", this.getUserPage);
    eventBus.$on("deleteUser", this.deleteUser);
  },
  beforeDestroy() {
    eventBus.$off("getUserPage");
    eventBus.$off("deleteUser");
  },
};
</script>

<style scoped>
/deep/ .el-table th {
  background-color: #3f8cff !important;
  color: white;
}

/deep/ .el-table {
  background-color: transparent !important;
}

/deep/ .el-table_body {
  background-color: transparent !important;
}

/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent !important;
}
/deep/ .el-table_row {
  background-color: transparent !important;
}

/deep/ .el-table tr {
  background-color: transparent !important;
  color: white;
}
</style>